:root {
    --node-type-primary-color: #CD9494;
    --node-type-secondary-color: #ad6868;

    --flow-type-primary-color: #799191;
    --flow-type-secondary-color: #3E6868;

    --collection-type-primary-color: #d9cb8c;
    --collection-type-secondary-color: #bdac5d;
}

/*********************/

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?83733834');
  src: url('../font/fontello.eot?83733834#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?83733834') format('woff2'),
       url('../font/fontello.woff?83733834') format('woff'),
       url('../font/fontello.ttf?83733834') format('truetype'),
       url('../font/fontello.svg?83733834#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?83733834#fontello') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-caret-down:before { content: '\e800'; } /* '' */
.icon-caret-left:before { content: '\e801'; } /* '' */
.icon-caret-right:before { content: '\e802'; } /* '' */
.icon-minus:before { content: '\e803'; } /* '' */
.icon-plus:before { content: '\e804'; } /* '' */
.icon-user:before { content: '\e805'; } /* '' */
.icon-star:before { content: '\e806'; } /* '' */
.icon-star-empty:before { content: '\e807'; } /* '' */
.icon-move:before { content: '\f047'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-cloud-download:before { content: '\f0ed'; } /* '' */
.icon-github:before { content: '\f113'; } /* '' */
.icon-star-half:before { content: '\f123'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */

/*********************/

h1 {
    font-weight: normal;
    line-height: 1.1em;
}
[class*='col-'] {
    aborder: 1px solid red;
}
.library {
    background: #eee;
    font-size: 16px;
}
.library .grid {
    background: #fff;
    padding: 0 30px;
}

.library .grid.main-content {
    background: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #676767;
}

.main-content a {
    color: #aa6767;
}


.searchbox {
    max-width: 350px;
}
.search a {
    color: #999;
    line-height: 36px;
    padding: 2px;
    position: relative;
    left: -20px;
    top:1px;
    background: #fff;
}
.search input {
    padding: 3px 6px;
    height: 24px;
    margin: 0;
    width: 80%;
}

.search a:hover {
    color: #676767;
}

.buttons {
    flex-grow: 0;
    display: inline-block;
    font-size: 13px;
    text-align: right;
}
.buttons > a {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    margin-top: 7px;
    min-width: 38px;
    text-align: center;
    height: 38px;
    color: #eee;
    line-height: 32px;
    padding: 3px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.2);
}
.buttons  a:hover {
    background: rgba(255,255,255,0.3);
    text-decoration: none;
}
.buttons a.signin i {
    display: none;
}
.buttons a.user {
    width: 52px;
    height: 52px;
    padding: 0;
    margin-top: 0;
    border: 2px solid white;
    border-radius:0;
    border-top-right-radius:12px;
    border-bottom-left-radius:6px;
    overflow: hidden;
}
.buttons img {
    width: 100%;
    height: 100%;
}
.buttons > a.user:hover img {
    opacity: 0.6;
}

.user-menu {
    display: none;
    font-size: 16px;
    line-height: 42px;
    position: relative;
    right: -20px;
    top: 0px;
    z-index: 20;
    min-width: 200px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #aa4444;
    text-align: left;
    border-bottom-left-radius: 10px;
    border-top: 2px solid rgba(255,255,255,0.3);
}
/* .user-menu:after {
    bottom: calc(100% + 2px);
    right: 35px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(170, 68, 68, 0);
    border-bottom-color: rgba(255,255,255,0.3);
    border-width: 8px;
    margin-left: -8px;
} */


.user-menu  li hr {
    margin:0 ;
    border: 1px solid rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.3);
    background-color:rgba(255,255,255,0.3);
}
.user-menu a {
    padding: 3px 10px 3px 20px;
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #f3f3f3;
}

.flow {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px;
    font-size: 12px;
    line-height: 22px;
    font-family: monospace;
    cursor: pointer;
    position:relative;
    background: #564848;
    color: #eee;
    border-radius: 3px;
}
button.copy-button {
    position: absolute;
    right: 0;
    top: 0px;
    box-sizing: border-box;
    background: white;
    border: 1px solid #aa6767;
    text-shadow: none;
    font-size: 12px;
    color: #666 !important;
    padding: 6px 10px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    vertical-align: middle;
    cursor: pointer;
}
button.copy-button:focus {
    outline: none;
}
button.copy-button:active {
    background: #f3f3f3;
}

#dreadme {
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 30px;
}

.pagetitle {
    vertical-align:middle;
}

.pagetitle img {
    width:64px;
    border-radius: 5px;
}

.flowmeta {
    font-size: 0.9em;
    padding: 10px;
    border: 1px solid #ccc;
    border-top-right-radius: 15px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.flowmeta  h4 {
    margin: auto;
}
.flowmeta  h5 {
    margin: 5px 10px 0 10px;
}

.flowmeta img {
    dborder: 1px solid #ccc;
}
.flowinfo {
    margin-left: 10px;
    font-size: 14px;
}
.flow-stat {
    display: inline-block;
    min-width: 30px;
    text-align: right;
    font-weight: bold;
}
.nodeTypeList {
    margin: 0;
}
.userinfo {
    margin-left: 10px;
    display:inline-block;
}
.flowinfo a.scorecard-summary:hover {
    text-decoration: none;
}

.flowinfo a.scorecard-summary:hover .scorecard-link {
    text-decoration: underline;
}

.small {
    font-size: 11px;
}

.popover {
    background-color: #FDFFC2;
}
.popover.bottom .arrow:after {
    border-bottom-color:#FDFFC2;
}
.popover.top .arrow:after {
    border-top-color:#FDFFC2;
}
.popover.right .arrow:after {
    border-right-color:#FDFFC2;
}

.add-help {
    -border: 1px solid #ccc;
    -border-radius: 3px;
    -display: none !important;
}
.add-help p {
    margin-bottom: 10px;
    font-size: 14px;
}
.add-form .dialog-warning.add-collection-title-warning {
    right: 0;
}
.add-form .dialog-warning.add-collection-flow-warning {
    right: 0;
}
.add-form input[type=text] {
    margin-bottom: 0;
    height: 40px;
    font-size: 20px;
    width: 100%;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid #999;
}
.add-form textarea {
    border: 1px solid #999;
    font-size: 14px;
    width: 100%;
    resize: none;
    padding: 10px;
    border-radius: 3px
}
.add-form textarea,
.add-form input {
    outline: none;
}
.add-form textarea:focus,
.add-form input:focus {
    outline: none;
}

#add-flow-title {
    font-family: 'Roboto Slab', serif;
}
#add-flow-flow {
    height: 125px;
    padding: 10px;
    font-size: 12px;
    line-height: 22px;
    font-family: monospace;

}
#add-flow-desc {
    height: 350px;
    margin-top: 19px;
}
#add-flow-desc-md {
    min-height: 350px;
    margin-top: 19px;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: none;
    padding: 10px;
    background: #fff;
}

.add-form p {
    color: #888;
    font-size: 0.9em;
}
.add-flow-label {
    margin-top: 25px;

}
.add-flow-desc-buttons {
    position: absolute;
    top: 0;
    right:0;
    text-align: right;
    margin-bottom: -2px;
}
.add-flow-desc-buttons a {
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 4px;
    width: 90px;
    display: inline-block;
    height: 30px;
    text-align: center;

}
.add-flow-desc-buttons a.active {
    border-bottom: #fff;
}
.add-flow-desc-buttons a.active:hover {
    border-bottom: #fff;
    cursor: default;
}

.add-flow-desc-buttons a:hover {
    text-decoration: none;
}
.add-flow-desc-buttons a.inactive {
    background: #f0f0f0;
}
.add-flow-desc-buttons a.inactive:hover {
    background:#f6f6f6;
}

ul.flow-tags {
    list-style-type: none;
    margin: 0px;
    padding: 2px 4px;
}
ul#add-flow-tags {
    border: 1px solid #999;
    border-radius: 3px;
    min-height: 45px;
}

ul#add-flow-tags.active {
    box-shadow: 0 0 8px #fbb;
}

ul.flow-tags li {
    transition-property: background;
    transition-duration: 500ms;
    transition-timing-function: ease;
    display: inline-block;
    padding: 3px 5px 3px 5px ;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    margin: 3px 3px 3px 1px;
    cursor: default;
    font-size: 14px;
}

ul.flow-tags li:hover {
    background: #f0f0f0;

}
ul#add-flow-tags li.tag-input:not(:first-child) {
    padding: 0;
}

ul#add-flow-tags li.tag-input {
    border: none;
    background: none;
    height: 28px;
    vertical-align: middle;

}
li.tag-input input[type=text] {
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    color: #666;
    vertical-align: middle;
    height: auto;
    padding: 0;
}
li.tag-input input:focus {
    outline: none;
}

ul#add-flow-tags li i.icon {
    color: #aaa;
}

.addButton {
    border: 2px solid #ddd;
    padding: 7px 9px;
    border-radius: 6px;
    margin: 0px 5px;
}
.addButton:hover {
    background: #f3f3f3;
}

.add-step {
    margin-bottom: 20px;
}
.add-index {
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
}
.add-step h3 {
    margin-top:10px;
}
.add-step ul {
    font-size: 20px;
}
.add-step ul li {
    line-height: 30px;
}

#flowerror {
    width: 600px;
    text-align: right;
    font-size: 18px;
}

.input-error {
    border-color: rgb(214, 97, 95) !important;
}

.header-image {
}

.btn-create.submitted {
    background: #fff;
}
.btn-create.submitted:hover {
    background: #fff;
}

.btn-create {
    border: 2px solid #aa6767;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
    background: #aa6767;
    text-shadow: none;
    font-size: 16px;
    padding: 15px;
    min-width: 110px;
}
.btn-create {
    font-size: 14px;
    color:  #eee !important;
    margin-top: 5px;
}
.btn-create:hover {
    text-decoration: none;
    background: #7F4545;
    border-color: #7F4545;
    text-shadow: none;
}
.btn-load-more {
    border: 2px solid #aa6767;
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    background: #aa6767;
    text-shadow: none;
    font-size: 16px;
    padding: 5px;
    width: 250px;
    color:  #eee !important;
    margin: 5px;
}
.btn-load-more:hover {
    background: #7F4545;
    text-decoration: none;
    text-shadow: none;
}
.btn-load-more.hide {
    display: none;
}
.create-toc {
    display: inline-block;
    max-width: 350px;
    margin-left: 10px;
    vertical-align: middle;
    margin-bottom: 0;
}

.loader {
    display: none;
}

.btn-download {
    background: #aa6767;
    border:none;
    text-shadow: none;
    font-size: 16px;
    color: #fff !important;
    padding: 12px;
    border-radius: 3px;
    vertical-align: middle;
}
.btn-download .download-link {
    letter-spacing: 1px;
    font-family: 'Roboto Slab', serif;
}
.btn-download .download-version {
    font-size: 14px;
    color:  #eee;
    margin-top: 5px;
}
.btn-download:hover {
    background: #7F4545;
    border:none;
    text-decoration: none;
    text-shadow: none;
}

h1.flow-title {
    border-bottom: 2px solid #B68181;
    padding-bottom: 10px;
    margin-bottom: 40px;
    margin-top: 10px;
    font-weight: normal;
}
.flow-version {
    padding-left: 5px;
    color: #aaa;
    font-size: 20px;
}
p.flow-description {
    color:#aaa;
    font-size: 20px;
    font-weight: normal;
}
p.flow-install {
    font-size: 16px;
    color: #aaa;
}
p.flow-install code {
    background: none;
    color: inherit;
}
.flow-install-help {
    float: right;
}
.flow-install-help a {
    color: inherit;
}
.flow-install-help a:hover{
    color: #aa6767;
    text-decoration: none;
}

input[type="text"]:focus {
    outline: none;
}
input[type="text"] {
    margin-bottom: 0;
    height: 40px;
    font-size: 20px;
    width: 100%;
    padding: 8px;
    border-radius: 2px;
    border: 1px solid #999;
}
input[type="text"].gist-filter-input {
    font-size: 16px;
    padding: 10px;
    color: #666;
    width: 100%;
    vertical-align: middle;
}
.npm-token-form {
    margin: 10px 0;
}

.npm-token-form input[type="text"] {
    font-size: 16px;
    padding: 4px;
    color: #666;
    width: 360px;
}
.npm-verify-fail {
    display: none;
    width: 360px;
    text-align: right;
    font-size: 14px;
    color: #aa4444;
}


.gist-filter {
    max-width: 500px;
    display: inline-block;
    width: 100%;
    position: relative;
}
.gist-sort {
    max-width: 500px;
    font-size: 14px;
    display:inline-block;
    vertical-align:top;
    margin-left: 30px;
    margin-top: -12px;
    line-height: 1.5;
}

.gistbox-sort-label {
    cursor: pointer;
}

.filter-results {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 10;
    background: white;
    line-height: 18px;
    border: 3px solid #aa4444;
    border-bottom-left-radius: 20px;
    top: 43px;
    color: #333;
}

.filter-results ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom-left-radius: 20px;
}
.filter-results li a,.filter-results li > span {
    display: inline-block;
    padding: 10px 20px;
    width: 100%;
    height: 100%;
}

.filter-results li > span {
    color: #999;
    font-style: italic;
}
.filter-results li a:hover {
    background: #f0f0f0;
}
.filter-result-type {
    float: right;
    color: white;
    display: inline-block;
    font-size: 0.9em;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 4px;
    padding: 3px 6px;
}
.filter-result-node {
    background: var(--node-type-primary-color);
}
.filter-result-flow {
    background: var(--flow-type-primary-color);
}
.filter-result-collection {
    background: var(--collection-type-primary-color);
}


.filter-term-spinner {
    position: absolute;
    right: 8px;
    top: 5px;
    width: 32px;
    height: 32px;
    background: url(/images/spin.svg) no-repeat;
    display: none;
}
.filter-options {
    margin-top: 15px;
}
.filter-options-section {
    font-size: 13px;
}

.filter-options-sort {
    margin-top: 8px;
    margin-right: 20px;
    text-align: right;
    font-size: 13px;
}
.filter-options-sort select {
    color: #555;
    display: inline-block;
    font-size: 13px;
    padding: 2px 5px;
    border: none;
    width: auto;
    background-image: none;
    cursor: pointer;
}
.filter-options-sort select:hover:not(:disabled) {
    background-image: none;
}

.filter-options ul {
    list-style-type: none;
    font-size: 13px;
    padding: 0;
    margin: 5px 0;
    display: inline-block;
    vertical-align: middle;
}
.filter-options input {
    cursor: pointer;
}

.filter-options li {
    display: flex;
    align-items: center;
    color: #999;
    margin: 4px 0;
}
.filter-options label {
    display: inline-block;
    cursor: pointer;
    padding: 3px 6px;
    color: #666;
    line-height: 20px;
}

input[name="sort"]:checked + label {
    background: white;
    border-color: #999;
    color: #666;
}
/* input[name="type"][value="node"]:checked + label {
    background: var(--node-type-primary-color);
    color: white;
    border-color: var(--node-type-secondary-color);
}
input[name="type"][value="flow"]:checked + label {
    background: var(--flow-type-primary-color);
    color: white;
    border-color: var(--flow-type-secondary-color);
}
input[name="type"][value="collection"]:checked + label {
    background: var(--collection-type-primary-color);
    color: white;
    border-color: var(--collection-type-secondary-color);
} */


.toolbar > div.grid {
    overflow: visible;
    color: white;
    background: #aa4444;
    height: 52px;
    padding-top: 6px;
    border-bottom-left-radius: 10px;
}
.toolbar form {
    display: inline;
}

.toolbar .gist-filter-input {
    border: none;
    border-top-right-radius:12px;
    border-bottom-left-radius:6px;

}

.gist-count {
    display: inline-block;
    text-align: right;
    float: right;
    font-size: 14px;
    line-height: 16px;
}
.gistlist-empty {
    text-align: center;
    font-size: 24px;
    margin: 0;
    color: #777;
}
ul.gistlist {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

li.gistbox {
    position: relative;
    border-top-right-radius:15px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:3px;
    border-top-left-radius:3px;
    display: inline-block;
    background: #fff;
    height: 140px;
    margin-bottom: 15px;
    margin-right: 15px;
    min-width: 150px;
    overflow: hidden;

    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
li.gistbox.show {
    height: 125px;
}

.gistbox > a {
    border-bottom-right-radius:3px;
    border-top-left-radius:3px;
    border-top-right-radius:15px;
    border-bottom-left-radius:8px;
    padding: 10px;
    border: 2px solid var(--node-type-primary-color);
    display: block;
    width: 100%;
    height: 100%;
    color: #666;
    overflow: hidden;
    position:relative;
}
.gistbox> a:hover {
    text-decoration: none;
    border-color: var(--node-type-secondary-color);
}
h1.gisttitle {
    font-size: 14px;
    margin: 0;
    font-weight: normal;
    color: #444;
}
p.gistdescription {
    font-size: 13px;
    line-height: 1.3em;
    color: #999;
    margin: 5px 0 0 0;
}
.gistbox-footer {
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    padding: 0px;
    font-size: 0.8em;
    text-align: right;
    background: var(--node-type-primary-color);
    color: #fff;
}
.gistbox:hover .gistbox-tools {
    display: block;
}
.gistbox-tools {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    text-align: right;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 6px;
}
.gistbox-tools > div {
    text-align: center;
    min-width: 30px;
}
.gistbox-tools > div:first-child {
    text-align: right;
}
.gistbox-tools > div:first-child a {
    padding-right: 8px;
}

.gistbox-tools.open > div:not(:first-child) {
    display: block;
}
.gistbox-tools  .fa-caret-down {
    transition: all 0.2s ease;
}
.gistbox-tools.open  .fa-caret-down {
    transform: rotate(-180deg);
}
.gistbox-tools > div {
    height: 30px;
    line-height: 28px;
}
.gistbox-tools > div.gistbox-expand {
    height: 20px;
    line-height: 18px;
}
.gistbox-handle a {
    cursor: grab;
}
.gistbox-tools > div:not(:first-child) {
    display: none;
}
.gistbox-tools > div a {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 2px solid #eee;
    padding: 0 6px;
    color: rgba(255,255,255,0.8)
}
.gistbox-tools > div a:hover {
    text-decoration: none;
}
.gistbox-tools > div:first-child a {
    border-top-right-radius: 12px;
}
.gistbox-tools > div:last-child a {
    border-bottom-left-radius: 6px;

}


.gistbox-tags {
    padding: 0 10px;
    font-size: 11px;
    line-height: 12px;
}
.gistbox-type {
    margin: 7px 0 3px 7px;
    padding: 2px;
    float: left;
    line-height: 1.1em;
}
.gistbox-owner {
    padding: 3px 10px;
}
a:hover .gistbox-footer {
    background:  var(--node-type-secondary-color);
}

.gistbox-official {
    float: left;
}
.gistbox-placeholder a {
    border-color: #f3f3f3;
}
.gistbox-placeholder a:hover {
    border-color: #f3f3f3;
}
.gistbox-placeholder a .gistbox-footer {
    background: #f3f3f3;
}
.gistbox-placeholder a:hover .gistbox-footer {
    background: #f3f3f3;
}



.gistbox-node > a { border-color: var(--node-type-primary-color); }
.gistbox-node > a .gistbox-footer { background: var(--node-type-primary-color); }
.gistbox-node > a:hover { border-color: var(--node-type-secondary-color); }
.gistbox-node > a:hover .gistbox-footer { background: var(--node-type-secondary-color); }
.gistbox-node .gistbox-tools  { background: var(--node-type-primary-color); }
.gistbox-node .gistbox-tools > div a { border-color: var(--node-type-primary-color); }
.gistbox-node .gistbox-tools > div a:hover { background: var(--node-type-secondary-color); border-color: var(--node-type-secondary-color); }

.gistbox-flow > a { border-color: var(--flow-type-primary-color); }
.gistbox-flow > a .gistbox-footer { background: var(--flow-type-primary-color); }
.gistbox-flow > a:hover { border-color: var(--flow-type-secondary-color); }
.gistbox-flow > a:hover .gistbox-footer { background: var(--flow-type-secondary-color); }
.gistbox-flow .gistbox-tools  { background: var(--flow-type-primary-color);  }
.gistbox-flow .gistbox-tools > div a { border-color: var(--flow-type-primary-color); }
.gistbox-flow .gistbox-tools > div a:hover { background: var(--flow-type-secondary-color); border-color: var(--flow-type-secondary-color); }

.gistbox-collection > a { border-color: var(--collection-type-primary-color); }
.gistbox-collection > a .gistbox-footer { background: var(--collection-type-primary-color); }
.gistbox-collection > a:hover { border-color: var(--collection-type-secondary-color); }
.gistbox-collection > a:hover .gistbox-footer { background: var(--collection-type-secondary-color); }

/**
*  Node-RED Flow Preview
*/
.flowviewer {
    position: relative;
}
.flowviewer svg {
    --red-ui-view-grid-color: #eee;
    --red-ui-view-border: 1px solid #bbbbbb;
    --red-ui-node-border: #999;
    --red-ui-node-background-default: #eee;
    --red-ui-node-icon-background-color-fill: black;
    --red-ui-node-icon-background-color-opacity: 0.1;
    --red-ui-node-label-color: #333;
    --red-ui-node-port-background: #d9d9d9;
    --red-ui-link-color: #999;
    background-color: white;
    min-height: 450px;
    border: var(--red-ui-view-border);
    border-radius: 3px;
    position: relative;
}

.flowviewer svg {
    width: 100%;
    height: 100%;
    min-height: 450px;
    margin: auto;
    display: block;
    border-radius: 2px;
}

.flowviewer svg {
    cursor: move;
    cursor: grab;
}

.flowviewer .dragging {
    cursor: grabbing;
}

.flowviewer-tabs {
    display: flex;
}
.flowviewer-tab {
    padding: 6px 12px;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #bbbbbb;
    border-right: none;
    background-color: #f0f0f0;
    max-width: 200px;
    width: 14%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin-top: -1px;
    transition: 0.2s background-color;
}
.flowviewer-tab.active {
    background-color: white;
    border-top-color: white;
}
.flowviewer-tab:hover {
    cursor: pointer;
    background-color: white;
}
.flowviewer-tab:last-child {
    border-right: 1px solid #bbbbbb;
}

.flowviewer-note {
    margin-top: 12px;
    font-size: 0.875rem;
    font-style: italic;
}

body.flowviewer-share {
    background-color: inherit;
}

.thing-list-nav {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
}
.thing-list-nav-link {
    border: 2px solid #aa4444;
    padding: 10px;
    border-radius: 4px;
}
.thing-list-nav-link:hover {
    text-decoration: none;
    background: #aa4444;
    color: white;
}
.thing-list-nav-page-info {
    display: inline-block;
    width: 100px;
}
.thing-list-section-header {
    position: relative;
    padding: 8px 0 10px;
}
.thing-list-section-header h2 {
    margin: 0 0 0 7px;
    padding: 0;
    font-size: 18px;
}
.thing-list-section {
    margin-top: 15px;
    margin-bottom: 15px;
    border-top-right-radius:40px;
    border-bottom-left-radius:20px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.thing-list-section-header a {
    position: absolute;
    right: 0;
    top: 8px;
    font-size: 16px;
}
/* http://paletton.com/#uid=7000u0k8UpJ2nG55nurcJlGfPgZ */
.library .grid.user-profile-section {
    padding-top: 10px;
    padding-bottom: 10px;
}
.user-profile-section h4 {
    margin: 0 0 10px 0;
}
.user-profile-action {
    font-size: 14px;
    color: #aa4444;
    border: 1px solid rgba(0,0,0,0);
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
}
.user-profile-action:hover {
    text-decoration: none;
    color: #aa4444;
    border: 1px solid #aa4444;
}



.palette_label {
    margin: 4px 0;
    color: #333;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
}
.palette_node {
   font-size:13px;
   background: #ddd;
   border-radius: 6px;
   border: 2px solid #999;
   min-width: 90px;
   display: inline-block;
   padding: 0;
   position: relative;
}
.palette_icon {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    width: 30px;
    text-align: center;
    color: white;
    line-height: 28px;
    border-right: 2px solid rgba(0,0,0,0.1);
    background-color: rgba(0,0,0,0.05);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
.palette_label {
    padding: 0 10px;
    min-width: 90px;
}
.palette_node_config {
    border-color: #aaa;
    border-style: dashed;
    background: #eee;
}
.palette_port {
   position: absolute;
   top:33%;
   left: -6px;
   box-sizing: border-box;
    -moz-box-sizing: border-box;
   background:#d9d9d9;
   border-radius: 3px;
   width: 10px;
   height: 10px;
   border: 1px solid #999;
}
.palette_port_output {
    right:-6px;
    left: auto;
}

.gistbox.filtered {
    width: 0;
    height: 0;
    margin: 0;
}

.events {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
}
.events td {
    border-width: 1px;
    border-color: #999;
    border-style: solid;
    padding: 3px 5px;
}
.events tr:nth-child(even) {
    background: #f3f3f3
}


.dialog-shade {
    display: none;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(88,38,38,0.8);
    text-align: center;
}
.dialog-shade:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dialog {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    overflow: auto;
    width: calc(100% - 10px);
    max-width: 500px;
    margin: auto;
    background: white;
    padding: 0px 40px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 15px;

}
#report-node-dialog textarea {
    border: 1px solid #999;
    font-size: 14px;
    width: 100%;
    height: 150px;
    resize: none;
    padding: 10px;
    border-radius: 3px;
    color: #333;
}
.dialog  > div:not(:last-child) {
    margin-bottom: 20px;
}
.dialog button:not(.copy-button) {
    line-height: 1.3em;
    border: 1px solid #aa6767;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    text-shadow: none;
    font-size: 15px;
    padding: 10px;
    min-width: 110px;
    color: #333;
    cursor: pointer;
    margin-right: 20px;
}
.dialog button:last-child,.dialog a:last-child {
    margin-right: 0;
}

.dialog button:hover, .dialog a:hover {
    text-decoration: none;
    background: #c37d7d;
    color: #f3f3f3;
}
.dialog button[type="submit"] {
    background: #aa6767;
    color: #eee;
}

.dialog-warning {
    display: none;
    font-size: 0.8em;
    color: #aa4444;
    position: absolute;
}
.dialog-buttons {
    padding: 10px;
    text-align: right;
}
.dialog-create-collection-button {
    width: 100%;
}
.warning-box {
    border: 1px solid #aa4444;
    border-radius: 4px;
    padding: 12px;
    color: #aa4444;
    text-align: center;
}
.warning-box:after {
    content: '';
    display: table;
    clear: both;
}

select {
    color: #333;
    display: block;
    font-size: 15px;
    width: 100%;
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aa6767;
    border-radius: 3px;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
select::-ms-expand {
    display: none;
}
select:hover:not(:disabled) {
    background-color: #c37d7d;
    color: #f3f3f3;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f3f3f3%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
select:disabled {
    opacity: 0;
}
select:focus {
    outline: none;
}
select option {
    font-weight:normal;
}



.front-hero {
    position: relative;
    width: 100%;
    height: 220px;
}
.front-hero:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 300%;
    top: -100%;
    left: -50%;
    background: #e3b7b5;
    background-image: url(/images/user-backdrop.svg);
    transform: rotate(-10deg);
}
.front-hero > div:first-child {
    margin-top: 40px;
}
.front-hero > div:first-child > div {
    margin: 20px;
}
.front-hero h2 {
    margin: 0;
    color: white;
}
.front-hero p {
    color: #f0f0f0;
}

.user-hero, .collection-hero {
    position: relative;
    width: 100%;
    height: 160px;
    padding: 10px;
    margin-bottom: 3px;
    text-align: center;
}
.collection-hero {
    text-align: left;
}
.user-hero:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 300%;
    top: -100%;
    left: -50%;
    background: #e3b7b5;
    background-image: url(/images/user-backdrop.svg);
    transform: rotate(-10deg);
}
span.username {
    font-size: 24px;
    font-family: "Roboto Slab";
}
.user-meta, .collection-meta {
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    background: #aa4444;
    color: white;
    text-align: left;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
}
.collection-title {
    position: relative;
}

.avatar {
    position: relative;
    top: -30px;
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 3px;
    border: 3px solid #aa4444;
}
.avatar-placeholder {
    background: #e6d5d4;
    background-image: url(/images/user-backdrop.svg);
    background-size: 80px;
}
.user-meta a {
    color: white;
}
.user-meta a:hover {
    text-decoration: none;
    border-bottom: 3px solid rgba(255,255,255,0.5);
}
.user-meta a.active {
    border-bottom: 3px solid white;
}

.dialog-list {
    min-height: 250px;
    border: 1px solid #aa4444;
    border-radius: 4px;
    margin: 10px 0;
    overflow-y: scroll;
    background: #f6f6f6;
}
.dialog-list > div {
    padding: 8px 6px;
    background: white;
    position: relative;
}
.dialog-list > div:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}
.dialog-list .dialog-warning {
    display: inline-block;
    bottom: 8px;
    right: 80px;
}
.scorecard_pass {
    color: green
}
.scorecard_warn {
    color: orange
}
.scorecard_fail {
    color: darkred
}
.ruleinfo {
    color: #676767;
}
/* The Rule Modal (background) */
.rulemodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .rulemodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  /* The Close Button */
  .rulemodal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .rulemodal-close:hover,
  .rulemodal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

@media handheld, only screen and (max-width: 767px) {
    .library .grid {
        padding: 0;
    }
}
@media handheld, only screen and (max-width: 767px) {
    li.gistbox {
        display: block;
        width: 100%;
        float: none;
    }
    .gist-filter {
        width: calc(100% - 100px);
    }
    .filter-results {
        width: calc(100% + 100px);
    }
    .buttons {
        right: -12px;
    }
    .buttons a.signin i {
        display: inline-block;
    }
    .buttons a.signin span {
        display: none;
    }

    [class*='col-'].thing-list-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .filter-options form {
        flex-direction: column;
    }
    .filter-options li {
        margin-left: 0px;
        margin-right: 0px;
    }
    .filter-options ul.filter-options-filter {
        margin-bottom: 10px;
    }

   
}


@media handheld, only screen and (max-width: 900px) {
    .gist-sort {
        margin-left:0;
        margin-top:0;
        display: block;
    }
    .gist-sort div {
        display: inline-block;
    }
    ul.gistlist {
        grid-template-columns: 1fr;
    }

}
.system-message {
    display: block;
    border: 2px solid #aa4444;
    padding: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    position:relative;
}
.system-message i {
    position: absolute;
    right: 10px;
    top: 12px;

}